# Component: Byline

Article metadata bar with responsive visibility

Metadata Block

![[Pasted image 20260426081606.png]]

### BEM Anatomy

| Type      | Class Name            | Description                                                                             |
| --------- | --------------------- | --------------------------------------------------------------------------------------- |
| ==Block== | `.as-byline`          | Main wrapper. Handles top/bottom borders and vertical padding.                          |
| Element   | `__list`              | The `ul` container. Resets Bootstrap's list-group borders.                              |
| Element   | `__item`              | Individual metadata cell (Date, Time, etc.).                                            |
| Modifier  | `__item--date`        | Specific item for the creation date.                                                    |
| Element   | `__date`              | The actual text container for the formatted date string.                                |
| Modifier  | `__item--time`        | Specific item for creation time. Uses `margin-left: auto` on mobile.                    |
| Element   | `__time`              | The text container for the timestamp or "reading time" estimate.                        |
| Modifier  | `__item--category`    | Contains category links or the split-dropdown for multiple tags.                        |
| Element   | `__category-link`     | Individual clickable tag or category label; handles hover states and background colors. |
| Element   | `__category-dropdown` | The trigger element for revealing hidden or additional categories.                      |
| Element   | `__category-menu`     | The toggleable container (dropdown-menu) holding the list of extra categories.          |
| Element   | `__category-item`     | The wrapper for items within the dropdown menu to maintain consistent padding.          |
| Modifier  | `__item--author`      | Displays the author name. Pushed to the far right on desktop.                           |

### Responsive Behavior

This component utilizes **Bootstrap Breakpoints** within the SCSS to adjust alignment:

- **Category & Author:** Hidden by default on mobile (`display: none`), visible from `sm` upwards.
- **Alignment:** Uses Flexbox `margin-left: auto` to create logical groupings (Time/Author are pushed to the right).

##### Generated HTML

```html
<div class="as-byline">
    <ul class="as-byline__list list-group list-group-horizontal">
        <li class="as-byline__item as-byline__item--date list-group-item">...</li>
        <li class="as-byline__item as-byline__item--time list-group-item">...</li>
        <li class="as-byline__item as-byline__item--category list-group-item">...</li>
        <li class="as-byline__item as-byline__item--author list-group-item">...</li>
    </ul>
</div>
```

##### SCSS

```scss
.as-byline {
  &__item--time {
    margin-left: auto; // Push to right on mobile
    @include media-breakpoint-up(sm) {
      margin-left: 0; // Reset on desktop
    }
  }
  &__item--author {
    margin-left: auto; // Always pushed to far right
  }
  &__item--category,
  &__item--author {
    display: none; // Hidden on mobile
    @include media-breakpoint-up(sm) {
      display: block;
    }
  }
}
```
